<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>zui</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="https://cdn.bootcss.com/zui/1.7.0/css/zui.min.css" rel="stylesheet">
</head>

<body>
    <div id="pageBody" class="scrollbar-hover">
        <div class="container">
            <div id="pageContent">
                <section class="">
                    <article>
                        <h4>静态实例</h4>
                        <div class="example">
                            <div class="modal">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal">
                                                <span aria-hidden="true">×</span>
                                                <span class="sr-only">关闭</span>
                                            </button>
                                            <h4 class="modal-title">标题</h4>
                                        </div>
                                        <div class="modal-body">
                                            <p>主题内容...</p>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                            <button type="button" class="btn btn-primary">保存</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <h4>动态实例</h4>
                        <p>点击按钮通过Javascript来启动一个对话框。</p>
                        <div class="example">
                            <button type="button" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#myModal">启动对话框</button>
                        </div>
                    </article>
                </section>
                <section>
                    <header>
                        <h3>设置对话框显示位置</h3>
                    </header>
                    <article>
                        <p>默认情况下对话框会根据自身内容高度展示在页面中心稍靠上方的位置。通过一些参数可以重新决定对话框的展现位置（具体参数参考“如何使用”章节）。</p>
                        <div class="example">
                            <button type="button" class="btn btn-primary" data-position="fit" data-toggle="modal" data-target="#myModal">默认位置</button>
                            <button type="button" class="btn btn-primary" data-position="center" data-toggle="modal" data-target="#myModal">窗口中间</button>
                            <button type="button" class="btn btn-primary" data-position="0" data-toggle="modal" data-target="#myModal">靠近上方</button>
                            <button type="button" class="btn btn-primary" data-position="100px" data-toggle="modal" data-target="#myModal">距离上方100px</button>
                        </div>
                    </article>
                </section>
                <section>
                    <header>
                        <h3>更改对话框大小</h3>
                    </header>
                    <article>
                        <div class="example">
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myLgModal">大对话框</button>
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mySmModal">小对话框</button>
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myFullscreenModal">全屏对话框</button>
                        </div>
                    </article>
                </section>
                <section>
                    <header>
                        <h3>可移动的对话框</h3>
                    </header>
                    <article>
                        <div class="example">
                            <button type="button" class="btn btn-primary" data-moveable="true" data-remember-pos="false" data-toggle="modal" data-target="#moveableModal"
                                data-position="center">
                                <i class="icon icon-move"></i> 打开我 拖动我</button>
                        </div>
                        <div class="example">
                            <button type="button" class="btn btn-primary" data-moveable="true" data-remember-pos="rememberMoveableModal" data-toggle="modal"
                                data-target="#rememberMoveableModal">
                                <i class="icon icon-move"></i> 打开我 拖动我</button>
                        </div>
                    </article>
                </section>
                <section>
                    <header>
                        <h3>禁用动画效果</h3>
                    </header>
                    <article>
                        <div class="example">
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#fastModal">立即展现</button>
                        </div>
                    </article>
                </section>
                <script>
                    function afterPageLoad() {
                        $('body > .modal-for-page').remove();
                        $('#pageBody .modal-for-page').appendTo('body').on('click', function (e) {
                            e.stopPropagation();
                        });
                    }

                    function onPageClose() {
                        $('body > .modal-for-page').remove();
                    }
                </script>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/zui/1.7.0/js/zui.min.js"></script>
    <div class="modal modal-for-page fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                        <span class="sr-only">关闭</span>
                    </button>
                    <h4 class="modal-title">对话框标题</h4>
                </div>
                <div class="modal-body">
                    <h4>虞美人·春花秋月何时了
                        <small>五代·李煜</small>
                    </h4>
                    <p>春花秋月何时了？往事知多少。小楼昨夜又东风，故国不堪回首月明中。
                        <br>雕栏玉砌应犹在，只是朱颜改。问君能有几多愁？恰似一江春水向东流</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary">确定</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal modal-for-page fade" id="myLgModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                        <span class="sr-only">关闭</span>
                    </button>
                    <h4 class="modal-title">大对话框</h4>
                </div>
                <div class="modal-body">...</div>
            </div>
        </div>
    </div>
    <div class="modal modal-for-page fade" id="mySmModal">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                        <span class="sr-only">关闭</span>
                    </button>
                    <h4 class="modal-title">小对话框</h4>
                </div>
                <div class="modal-body">...</div>
            </div>
        </div>
    </div>
    <div class="modal modal-for-page fade" id="myFullscreenModal">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                        <span class="sr-only">关闭</span>
                    </button>
                    <h4 class="modal-title">全屏对话框</h4>
                </div>
                <div class="modal-body">...</div>
            </div>
        </div>
    </div>
    <div class="modal modal-for-page" id="fastModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                        <span class="sr-only">关闭</span>
                    </button>
                    <h4 class="modal-title">禁用动画效果演示</h4>
                </div>
                <div class="modal-body">...</div>
            </div>
        </div>
    </div>
    <div class="modal modal-for-page fade" id="moveableModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                        <span class="sr-only">关闭</span>
                    </button>
                    <h4 class="modal-title">可拖拽的对话框</h4>
                </div>
                <div class="modal-body">
                    <h1 class="text-warning">:)</h1>
                    <p>拖动我的头部来更改我的位置。</p>
                </div>
            </div>
        </div>
    </div>
    <div class="modal modal-for-page fade" id="rememberMoveableModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                        <span class="sr-only">关闭</span>
                    </button>
                    <h4 class="modal-title">可拖拽的对话框</h4>
                </div>
                <div class="modal-body">
                    <h1 class="text-warning">:)</h1>
                    <p>拖动我的头部来更改我的位置。</p>
                    <p>关闭此页面或浏览器再次打开我，对话框会在上次显示的位置显示。</p>
                </div>
            </div>
        </div>
    </div>
    <div class="modal modal-for-page" id="fastModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                        <span class="sr-only">关闭</span>
                    </button>
                    <h4 class="modal-title">禁用动画效果演示</h4>
                </div>
                <div class="modal-body">...</div>
            </div>
        </div>
    </div>
</body>

</html>